<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        :formColumns="formItems"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <skus-table
        ref="skusTable"
        showSelectCol
        showActionCol
        showPagination
        :tableHeight="480"
        :defaultMinWidth="100"
        :actionColWidth="180"
        :dataSource="TableInfo.list"
        :columns="TableInfo.columns"
        :loading="TableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="pagination.total"
        :selectionChange="TableInfo.setSelection"
        :actionRender="renderTableBtnAction"
        :checkSelectable="checkSelectable"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      >
        <!-- 按钮操作栏 -->
        <BtnRender slot="content_context" :render="renderBtnsBar" />
      </skus-table>
    </el-card>
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import BtnRender from '@/components/JSXRender/BtnRender';
import skusPage from '@/mixins/commodity/skusPage';
import { getListPageBtnsBar, getTableAction } from '@/utils/getBtnsRender';
import { getInitFormData, TableInfo, getSearchParamBySearchType } from '@/utils/getUtils';
import { setAuthBtnId, isResponseSuccess } from '@/utils/bizUtils';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants/list';
import { CategoryAuditEnum } from '@/constants/basics';
import {
  getPagerService,
  baseDeletesService,
} from '@/api/basics/categoryManage/categoryAuditRecord';
export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    SkusTable,
    BtnRender,
  },
  data () {
    return {
      formItems: FORM_ITEMS,
      formData: getInitFormData(FORM_ITEMS),
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      btnLoading: {
        batchDelete: false,
      },
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const btnBars = [
        {
          label: '批量删除',
          method: this.handleBatchDelete,
          disabled: this.TableInfo.isNullSelection(),
          hasAuth: true
        }
      ]
      return getListPageBtnsBar(h, btnBars, this.showBtn, 'start')
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [
        {
          label: '查看',
          method: this.handleView,
        },
        {
          label: '删除',
          method: this.handleDelete,
          confirmTitle: '确定要删除吗？',
          hasAuth: true,
          canShow: row.reviewState == CategoryAuditEnum.Fail // 审核未通过展示
        },
        {
          label: '重新编辑',
          method: this.handleReedit,
          hasAuth: true,
          authLabel: '重新提交',
          canShow: row.reviewState == CategoryAuditEnum.Fail // 审核未通过展示
        }
      ]
      return getTableAction({ h, row, actionList, showBtn: this.showBtn });
    },
    // 根据审核状态禁用表格勾选 - 审核通过不可勾选
    checkSelectable ({ row }) {
      return row.reviewState !== CategoryAuditEnum.Success;
    },
    getSearchParam () {
      const reviewState = this.formData.reviewState || '2,3'
      const searchParam = getSearchParamBySearchType(FORM_ITEMS, { ...this.formData, reviewState })
      return JSON.stringify(searchParam)
    },
    // 获取表格数据
    async getTableData () {
      setAuthBtnId('查询')
      const data = { searchParam: this.getSearchParam(), ...this.paginationParams }
      const res = await getPagerService(data, this.TableInfo.setLoading)
      if (res?.retData) {
        this.TableInfo.setList(res.retData.results)
        this.setTotalNum(res.retData.totalNum)
      }
    },
    // 查看
    handleView (row) {
      const { href } = this.$router.resolve({
        name: 'categoryAuditViewNoPass',
        query: { uuid: row.uuid, editStatus: row.editStatus }
      })
      window.open(href, '_blank')
    },
    // 重新编辑
    handleReedit (row) {
      setAuthBtnId('重新提交')
      this.$router.push({
        name: 'categoryEdit',
        query: { uuid: row.uuid, pagesource: 1, editStatus: row?.editStatus }
      })
    },
    // 删除
    handleDelete (row) {
      const data = { uuids: row.uuid }
      const loadingFn = state => { this.btnLoading.batchDelete = state }
      this.batchDelete(data, loadingFn)
    },
    // 批量删除
    handleBatchDelete () {
      const uuids = this.TableInfo.selection.map(item => item.uuid).join(',')
      const data = { uuids }
      const loadingFn = this.TableInfo.setLoading
      this.$confirm('您确定要批量删除所选项吗？', '警告', {
        type: 'warning',
      }).then(() => {
        this.batchDelete(data, loadingFn)
      }).catch(() => {})
    },
    // 批量删除单据
    async batchDelete (data, loadingFn) {
      setAuthBtnId('删除')
      const res = await baseDeletesService(data, loadingFn)
      if (isResponseSuccess(res)) {
        this.$message.success('操作成功')
        this.getTableData()
      }
    }
  }
}
</script>
